<template>
	<view >
		<view class="uni-container">
			<!-- 添加一个按钮来显示/隐藏表单 -->
			<!--      <button class="uni-btn-v" @click="toggleForm">批量添加数据</button>-->

			<!-- 表单区域 -->
			<view v-if="showForm">
				<form @submit="onSubmit">
					<view class="formlist">
						<view class="lable2">
							<view class="u-top">
								<image class="u-image" src="../../static/交易方.png" mode=""></image>
								<view class="lable">交易方</view>
							</view>
							<!--            <input name="traner" style="border: 1px solid #ccc;font-size:smaller;border-radius:10rpx" placeholder="请输入交易方" />-->
							<input name="traner" type="text" v-model="searchContent" class="uni-input"
								@input="inputFun2" placeholder="请输入交易方">
							<div v-for="(item,index) in optionsData" @click="getOptionInfo(item,item.traner)"
								v-show="isshow"
								style="border:1px solid #ccc;ine-height:30px;cursor: pointer;border-radius:10rpx">
								{{ item.traner }}
							</div>
						</view>
						<view class="lable2">
							<view class="u-top">
								<image class="u-image" src="../../static/型号.png" mode=""></image>
								<view class="lable">型号</view>
							</view>
							<!--            <input name="model" style="border: 1px solid #ccc;font-size:smaller;border-radius:10rpx" placeholder="请输入型号" />-->
							<input name="model" type="text" v-model="searchContent2" class="uni-input"
								@input="inputFun3" placeholder="请输入型号">
							<div v-for="(item,index) in optionsData2" @click="getOptionInfo2(item,item.model)"
								v-show="isshow2"
								style="border:1px solid #ccc;ine-height:30px;cursor: pointer;border-radius:10rpx">
								{{ item.model }}
							</div>
						</view>
						<view class="lable2">
							<view class="u-top">
								<image class="u-image" src="../../static/数量.png" mode=""></image>
								<view class="lable">数量</view>
							</view>
							<input name="number" class="uni-input" placeholder="请输入数量" type="number" />
						</view>
						<view class="lable2">
							<view class="u-top">
								<image class="u-image" src="../../static/单价.png" mode=""></image>
								<view class="lable">单价</view>
							</view>
							<input name="unitPrice" class="uni-input" placeholder="请输入单价" type="number" />
						</view>


						<button class="uni-btn-v" form-type="submit" v-if="orstate == '1'">提交进货批次单</button>
						<button class="uni-btn-v" form-type="submit" v-if="orstate == '2'">提交销货批次单</button>
					</view>
				</form>
			</view>
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="60" align="center">型号</uni-th>
					<uni-th width="60" align="center">数量</uni-th>
					<uni-th width="60" align="center">单价</uni-th>
					<uni-th width="60" align="center">卖家</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.model }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.number }}</view>
					</uni-td>
					<uni-td align="center">{{ item.unitPrice }}</uni-td>
					<uni-td align="center">{{ item.traner }}</uni-td>
				</uni-tr>
			</uni-table>

			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
					:total="total" @change="change" /></view>
		</view>
		<view style="padding: 30rpx;">
			<button class="uni-btn-v" style="margin-top:45%;" @click="insertall" v-if="orstate == '1'">保存进货批次单</button>
			<button class="uni-btn-v" style="margin-top:45%;" @click="insertall" v-if="orstate == '2'">保存销货批次单</button>
		</view>
	</view>
</template>


<script>
	import {} from '@/common/api.js'
	import {
		Stockadd,
		Supplierqueryall,
		Customqueryall,
		modelqueryall,
		tranerqueryall
	} from "../../common/api";
	export default {
		data() {
			return {
				isshow: false,
				isshow2: false,
				searchContent: "",
				searchContent2: "",
				optionsData: [],
				optionsData2: [],
				fromData: {
					companyId: ''
				},
				showForm: true,
				orstate: '',
				value2: 1,
				value3: 1,
				//抽屉
				showLeft: false,
				searchVal: '',
				paymentMethod: '微信',
				isPay: '否',
				itemlist: [],
				modelData: [],
				tranerData: [],
				inseerlist: [],
				inseerlist2: [{
					value: 0,
					text: '现金'
				}, {
					value: 1,
					text: '微信'
				}, {
					value: 2,
					text: '支付宝'
				}],
				list3: [{
					value: 0,
					text: '否'
				}, {
					value: 1,
					text: '是'
				}],
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			}
		},
		onLoad(i) {
			console.log('orstate--------------');
			console.log(i);
			this.orstate = i.orstate;
      console.log(this.orstate)
      setTimeout(() => {
        if (this.orstate == '1'){
          uni.showToast({
            title: '进货批次单',
            icon: 'none',
            mask: true
          });
        }else {
          uni.showToast({
            title: '销货批次单',
            icon: 'none',
            mask: true
          });
        }
      }, 500);

			this.queryall();
		},
		methods: {
			inputFun2() {
				this.isshow = true
			},
			inputFun3() {
				this.isshow2 = true
			},
			getOptionInfo(val, searchName) {
				this.isshow = false
				this.searchContent = searchName
			},
			getOptionInfo2(val, searchName) {
				this.isshow2 = false
				this.searchContent2 = searchName
			},
			queryall() {
				this.loading = true
				this.fromData.companyId = uni.getStorageSync('companyId');
				console.log(this.fromData);
				uni.showLoading({
					title: '加载中...',
				});
				modelqueryall(this.fromData).then((res) => {
					console.log(res.data);
					this.loading = false;
					this.modelData = res.data
				})
				tranerqueryall(this.fromData).then((res2) => {
					uni.hideLoading();
					console.log(res2.data);
					this.loading = false;
					this.tranerData = res2.data
				})
			},
			insertall() {
				uni.showLoading({
					title: '加载中...',
				});
				Stockadd(this.tableData).then((res) => {
					uni.hideLoading();
					if (res.code === 0) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
						// setTimeout(() => {})
						uni.navigateBack({
							delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
						})
					} else {
						uni.showModal({
							content: '添加失败',
							confirmText: res.msg,
							showCancel: false,
							success(res) {
								uni.navigateBack({
									delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
								})
							}
						})
					}

				})
			},
			toggleForm() {
				this.showForm = !this.showForm;
			},
			onSubmit(e) {
				uni.showLoading({
					title: '加载中...',
				});
				const formData = e.detail.value;
				// 添加新数据到 tableData
				this.tableData.push({
					orstate: this.orstate,
					companyId: uni.getStorageSync('companyId'),
					model: formData.model,
					number: formData.number,
					traner: formData.traner,
					// amount: formData.amount,
					paymentMethod: this.paymentMethod,
					// paymentMethod: formData.paymentMethod,
					// isPay: formData.isPay,
					isPay: this.isPay,
					unitPrice: formData.unitPrice,
				});
				uni.hideLoading();
				// this.tableData[0].orstate = this.orstate;
				// this.showForm = false; // 提交后隐藏表单
			},
			change2(e) {
				console.log("e2:", e);
				if (e == 0) {
					this.paymentMethod = '现金'
				} else if (e == 1) {
					this.paymentMethod = '微信'
				} else if (e == 2) {
					this.paymentMethod = '支付宝'
				}
			},
			change3(e3) {
				console.log("e3:", e3);
				if (e3 == 1) {
					this.isPay = '是'
				} else if (e3 == 0) {
					this.isPay = '否'
				}
			},
			getSupplierData() {
				this.loading = true
				this.fromData.companyId = uni.getStorageSync('companyId');
				console.log(this.fromData);
				Supplierqueryall(this.fromData).then((res) => {
					console.log(res.data);
					for (let i = 0; i < res.data.length; i++) {
						this.inseerlist.push({
							text: res.data[i].name,
							value: i,
						})
					}
				})
			},
			getCustomData() {
				this.loading = true
				this.fromData.companyId = uni.getStorageSync('companyId');
				console.log(this.fromData);
				Customqueryall(this.fromData).then((res) => {
					console.log(res.data);
					//遍历res.data
					for (let i = 0; i < res.data.length; i++) {
						this.inseerlist.push({
							text: res.data[i].name,
							value: i,
						})
					}
				})
			},

		},
		watch: {
			searchContent(newVal) {
				if (newVal) {
					const regex = new RegExp(newVal, 'i'); // 创建不区分大小写的正则表达式
					var filteredItems = this.tranerData.filter(ele => {
						if (ele.traner && typeof ele.traner === 'string' && ele.traner.match(regex)) {
							return true;
						}
					});
					this.optionsData = filteredItems;
				} else {
					this.optionsData = []; // 清空选项列表
				}
				console.log(this.optionsData);
			},
			searchContent2(newVal) {
				if (newVal) {
					const regex = new RegExp(newVal, 'i'); // 创建不区分大小写的正则表达式
					var filteredItems = this.modelData.filter(ele => {
						if (ele.model && typeof ele.model === 'string' && ele.model.match(regex)) {
							return true;
						}
					});
					this.optionsData2 = filteredItems;
				} else {
					this.optionsData2 = []; // 清空选项列表
				}
				console.log(this.optionsData2);
			}
		}
	}
</script>


<style>
	/* #ifndef H5 */
	/* page {
padding-top: 85px;
} */
	/* #endif */
	.uni-group {
		display: flex;
		align-items: center;
	}

	.input {
		padding: 30rpx;
	}

	.uni-input {
		background-color: #F5F4F4;
		padding: 15rpx;
		border-radius: 15rpx;
	}

	.formlist {
		/* margin: 420rpx 30rpx 0 30rpx; */
		/* background-color: white; */
		padding: 30rpx;
		/* border-radius: 30rpx; */
	}

	.lable {
		font-size: 33rpx;
		font-weight: bold;
	}

	.uni-btn-v {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F9363A ;
		color: #fff;
		font-size: 35rpx;
		font-weight: bold;
		border-radius: 80rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.lable2 {
		margin-top: 5px;
	}

	.u-top{
		display: flex;
	}

	.u-image{
		    width: 50rpx;
		    height: 50rpx;
		    margin: 0 10rpx 10rpx 0;
	}
</style>
